<template>
	<view class="body">
		<u-navbar
		title="海报"
		:autoBack="true"
		:background="{
		background:'transparent'
		}"
		:border-bottom="false"
		titleSize="28rpx" titleColor="#333"
		back-icon-color="#333"
		:isFixed="false"
		/>
		
		<view class="container ">
			<view class="imgbox">
				<image :src="$str.img(store.config.hb_image)" mode="widthFix" class="img"></image>
				<view class="qrcode bgf" >
					<image :src="$str.img(qrcode)" mode="aspectFit" class="code"></image>
				</view>
			</view>
			<view class="content p30 bgf" v-if="store.config.yq_rule">
				<view class="f32 c3 bold mb20">
					邀请规则
				</view>
				
				<view class="c6 f28">
					<mp-html :content="store.config.yq_rule"></mp-html>
				</view>
				
			</view>
			<view class="rule f24 cf t-flex center" @click="$go('/pages/share/log')">
				邀请记录
			</view>
		</view>
		<view class="bpad"></view>
	</view>
	
	

	<view class="bottom t-flex center safeArea bgf">
		<view class="bottomcontent t-flex center">
			<view class="btn t-flex center s1" @click="saveposter">
				保存图片
			</view>
			<button open-type="share"  class="btn t-flex center s2" >分享</button>
		</view>
	</view>
	
	
	
	<view class="poster t-flex center">
		<l-painter path-type="url" @success="drawSuccess" :isCanvasToTempFilePath="true" type="2d" >
		  <l-painter-view css="background: #fff;position:relative;">
			  <l-painter-image
				:src="$str.img(store.config.hb_image)"
				css="width: 690rpx;"
			   />
			   <l-painter-image
			   	:src="$str.img(qrcode)"
			   	css="width: 120rpx;position: absolute;left:60rpx;top:464rpx"
			    />
			  
		  </l-painter-view>
		</l-painter>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from '../../lib/ts/util';
import { useStore } from '../../store';
import { myQrcode } from '../../api';
import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
	
	onShareAppMessage(()=>{
		let {sf_pid,xy_pid} = getscene()
		return {
			title:`来自${store.userinfo.nickname}的邀请`,
			path:`/pages/index/index?sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	onShareTimeline(()=>{
		let {sf_pid,xy_pid} = getscene()
		return {
			title:`来自${store.userinfo.nickname}的邀请`,
			query:`sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	
	const store = useStore()
	let qrcode = ref('')
	const getQrcode = async ()=>{
		let {sf_pid,xy_pid} = getscene()
		
		let lastQrcodeScene = uni.getStorageSync('lastQrcodeScene')
		let now = store.userinfo.is_sf?'sf':'xy'
		now+=store.userinfo.id
		qrcode.value = await myQrcode(`sf_pid=${sf_pid}&xy_pid=${xy_pid}`,lastQrcodeScene==now?1:2)
		//记录本次生成二维码时的身份
		uni.setStorageSync('lastQrcodeScene',now)
	}
	
	
	const getscene = ()=>{
		let sf_pid = 0
		let xy_pid = 0
		if(store.userinfo){
			sf_pid = store.userinfo.is_sf==1?store.userinfo.id:0
			xy_pid = store.userinfo.is_sf==1?0:store.userinfo.id
		}	
		return {
			sf_pid,
			xy_pid
		}
	}
	
	
	
	let filePath = ref()
	const drawSuccess = (e)=>{
		filePath.value = e
	}
	
	const saveposter = ()=>{
		if(filePath.value){
			uni.saveImageToPhotosAlbum({
				filePath:filePath.value,
				success(e) {
					showToast('已保存')
				}
			})
		}else{
			showToast('请先等待海报生成成功')
		}
	}
	getQrcode()
</script>

<style scoped lang="scss">
	.body{
		width: 100%;
		min-height: 100vh;
		background: linear-gradient( 180deg, #FFEDEB 0%, #F8F8F8 100%);
		font-size: 0;
	}
	
	.container{
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		.img{
			width: 100%;
		}
		.rule{
			width: 130rpx;
			height: 52rpx;
			background: rgba(0,0,0,0.29);
			border-radius: 31rpx 0rpx 0rpx 31rpx;
			position: absolute;
			right: 0;
			top: 20rpx;
		}
		
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EDEDED;
		.bottomcontent{
			justify-content: flex-end;
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				width: 330rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				background: $main-color-opcity1;
				color: $main-color;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.imgbox{
		position: relative;
		.qrcode{
			position: absolute;
			left:60rpx;
			top:460rpx;
			margin: auto;
			padding: 10rpx;
			// box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(122,122,122,0.26);
			border-radius: 6rpx;
			width: 120rpx;
			.code{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	
	.poster{
		position: fixed;
		top: 0;
		left: 2000rpx;
		opacity: 0;
	}
	
</style>
